<!--维修管理页-->
<template>
  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">维修审批</span>
  </div>
  <!-- 维修申请弹窗 -->
  <el-dialog
      :title="dialogTitle"
      v-model="saveDialogVisable"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">

    <el-form label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="资产识别码">
            <el-input placeholder="请输入内容" v-model="saveRepairForm.assetCode" @change="loadAsset"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修数量">
            <el-input placeholder="请输入内容" v-model="saveRepairForm.num" @change="checkNum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="品牌">
            <el-input placeholder="请输入内容" v-model="searchAsset.brand" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格">
            <el-input placeholder="请输入内容" v-model="searchAsset.specifications" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="资产状态" >
            <el-input placeholder="请输入内容" v-model="searchAsset.status" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库存数">
            <el-input placeholder="请输入内容" v-model="searchAsset.stockNum" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="原因">
            <el-input placeholder="请输入内容" v-model="saveRepairForm.reason"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预算费用">
            <el-input placeholder="请输入内容" v-model="saveRepairForm.priceEstimate"
                      :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                      :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input placeholder="请输入内容" v-model="saveRepairForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary"
                 @click="saveRepair">确定</el-button>
    </template>
  </el-dialog>

<!-- 维修审批弹窗 -->
  <el-dialog
      :title="dialogTitle2"
      v-model="saveDialogVisableB"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">

    <el-form label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="资产识别码">
            <el-input placeholder="请输入内容" v-model="saveRepairFormB.assetCode" @change="loadAssetB" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修数量">
            <el-input placeholder="请输入内容" v-model="saveRepairFormB.num" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="品牌">
            <el-input placeholder="请输入内容" v-model="searchAssetB.brand" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格">
            <el-input placeholder="请输入内容" v-model="searchAssetB.specifications" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="资产状态" >
            <el-input placeholder="请输入内容" v-model="searchAssetB.status" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原因">
            <el-input placeholder="请输入内容" v-model="saveRepairFormB.reason" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="预算费用">
            <el-input placeholder="请输入内容" v-model="saveRepairFormB.priceEstimate" disabled
                      :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                      :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际费用" v-if="globalStatus!=30">
            <el-input placeholder="请输入内容" v-model="saveRepairFormB.priceActual"
                      :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
                      :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="申请时间">
            <el-input placeholder="请输入内容" v-model="saveRepairFormB.applicationTime" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修完成时间">
              <el-date-picker
                  type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  v-model="saveRepairFormB.repairedTime"
              >
              </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input placeholder="请输入内容" v-model="saveRepairFormB.remark" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="驳回原因" v-if="applicationStatus==40 || globalStatus==40">
            <el-input placeholder="请输入内容" v-model="saveRepairFormB.rejectReason" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose" v-if="applicationStatus==10 && globalStatus==10">取消</el-button>
      <el-button type="danger"
                 @click="rejectAudit" v-if="applicationStatus==10 && globalStatus==10">驳回</el-button>
      <el-button type="success"
                 @click="confirmAudit" v-if="applicationStatus==10 && globalStatus==10">通过</el-button>
      <el-button type="success"
                 @click="finishConfirm" v-if="globalStatus==30">提交</el-button>
    </template>
  </el-dialog>


  <!-- 驳回原因弹窗 -->
  <el-dialog title="驳回 查看" v-model="rejectDialogVisible" style="margin-top: 37vh;" :before-close="rejectConfirm">
    <el-descriptions direction="horizontal" border>
      <el-descriptions-item label="驳回原因">
        <el-input placeholder="请输入驳回原因" v-model="rejectReason"></el-input>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button type="primary" plain @click="closeReject">取消</el-button>
      <el-button type="primary" @click="confirmReject">确定</el-button>
    </template>
  </el-dialog>


  <!-- 审批单主体 -->
  <el-card style="margin:20px;">
    <!--  审批状态项  -->
    <el-radio-group style="margin-bottom: 15px;" v-model="applicationStatus" @change="loadAudit">
      <el-radio-button value="10" size="large">待我审核</el-radio-button>
      <el-radio-button value="20" size="large">待他人审核</el-radio-button>
      <el-radio-button value="30" size="large">已审核</el-radio-button>
      <el-radio-button value="40" size="large">驳回</el-radio-button>
    </el-radio-group>
    <!--  审批列表  -->
    <el-table :data="auditList">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="userId" label="申请员工"  align="center"/>
      <el-table-column prop="assetCode" label="资产识别码"  align="center"/>
      <el-table-column prop="assetType" label="资产类型"  align="center"/>
      <el-table-column prop="assetBrand" label="品牌" align="center"></el-table-column>
      <el-table-column prop="num" label="维修数量"  align="center"/>
      <el-table-column prop="applicationTime" label="申请时间" align="center"/>
      <el-table-column label="操作" width="100" align="center" v-if="applicationStatus==10||applicationStatus==40" :key="audit">
        <template #default="scope">
          <!-- 审批10：在待我审核页签下显示，需要当前登录用户进行审批 -->
          <el-button type="primary" link v-if="applicationStatus==10" @click="auditing(scope.row.id)">审批</el-button>
          <!-- 查看40：在驳回页签下显示，可以查看已驳回申请的驳回原因 -->
          <el-button type="primary" link v-if="applicationStatus==40" @click="auditing(scope.row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <div style="height:6vh;padding:10px 20px;background-color:#fff;">
    <span style="line-height:60px;font-size:20px;">维修申请查询</span>
    <el-button type="primary" @click="saveDialogTitle"
               style="float:right;margin-top:10px;">维修申请</el-button>
  </div>

  <!--申请搜索卡片-->
  <el-card style="margin: 20px;height: 70px">
    <el-form :inline="true">
      <el-form-item label="资产识别码" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchApplication.assetCode"></el-input>
      </el-form-item>
      <el-form-item label="资产类型" style="width: 200px;">
        <el-input placeholder="请输入内容" v-model="searchApplication.assetType"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadApplication">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 维修申请列表 -->
  <el-card style="margin:20px;">
    <el-table :data="repairApplicationTable">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="userId" label="申请员工"  align="center"/>
      <el-table-column prop="assetCode" label="资产识别码"  align="center"/>
      <el-table-column prop="assetType" label="资产类型"  align="center"/>
      <el-table-column prop="num" label="维修数量"  align="center"/>
      <el-table-column prop="priceEstimate" label="预算费用" align="center"/>
      <el-table-column prop="priceActual" label="实际费用" align="center"/>
      <el-table-column prop="applicationTime" label="申请时间" align="center"/>
      <el-table-column prop="repairedTime" label="完成维修时间" align="center"/>
      <el-table-column prop="status" label="审批状态" align="center"
                       :formatter="statusFormatter"/>
      <el-table-column label="操作" align="center" >
        <template #default="scope">
          <!--    TODO v-if显示本人才可编辑删除      -->
          <el-button link type="primary" size="small" v-if="scope.row.status==10" @click="editRepair(scope.row.id)">编辑</el-button>
          <el-button link type="danger" size="small" v-if="scope.row.status==10" @click="deleteRepair(scope.row.id)">删除</el-button>
          <el-button link type="success" size="small" v-if="scope.row.status==30" @click="finishRepair(scope.row.id,scope.row.status)">完成维修</el-button>
          <el-button link type="info" size="small" v-if="scope.row.status==40 || scope.row.status==50" @click="auditing(scope.row.id,scope.row.status)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
// import axios from "axios";
import axios from "@/http";
import {ElMessage} from "element-plus";
import index from "vuex";

const  saveRepairForm = ref({});
const  saveRepairFormB = ref({});
const searchApplication = ref({});
const repairApplicationTable = ref([]);
const applicationStatus = ref("10");
const auditList = ref([]);
const dialogTitle = ref('维修申请');
const dialogTitle2 =ref('维修审批');
const saveDialogVisable = ref(false);
const saveDialogVisableB = ref(false);
const searchAsset = ref({});
const searchAssetB = ref({});
var applicationId;
var globalStatus;
const rejectDialogVisible = ref(false);
const rejectReason = ref("");

const userInfo = getUser();
const username = userInfo?userInfo.username:'用户';
var id = userInfo.id;
var departmentId = userInfo.departmentId;

const resetSearch = () => {
  searchApplication.value = {};
  loadApplication();
}

const loadApplication = () => {
  let data = qs.stringify(searchApplication.value);
  axios.get('/oa/asset/repair/select?'+data).then((response)=>{
    if(response.data.code == 20000){
      repairApplicationTable.value = response.data.data;
    }else {
      ElMessage.error(response.data.error);
    }
  })
}


onMounted(()=>{
  loadApplication();
  loadAudit();
})

const loadAudit = () => {
  let status = applicationStatus.value;
  axios.get('/oa/asset/repair/select?status='+status).then((response)=>{
    if(response.data.code == 20000){
      auditList.value = response.data.data;
    }else {
      ElMessage.error(response.data.error);
    }
  })
}


const loadAsset = () => {
  let code = saveRepairForm.value.assetCode;
  axios.get('/oa/asset/select?code='+code).then((response)=>{
    if(response.data.code == 20000 && response.data.data.length != 0){
      searchAsset.value = response.data.data.list[0];
      assetFormatter();
    }else {
      ElMessage.error("请确认资产识别码!");
    }
  })

}
const loadAssetB = () => {
  let code = saveRepairFormB.value.assetCode;
  axios.get('/oa/asset/select?code='+code).then((response)=>{
    if(response.data.code == 20000 && response.data.data.length != 0){
      searchAssetB.value = response.data.data.list[0];
      assetFormatter();
    }else {
      ElMessage.error("请确认资产识别码!");
    }
  })

}

const statusFormatter = (row,column,cellValue,index)=>{
  if(cellValue == 10){
    cellValue = '待审批';
  }else if(cellValue == 20){
    cellValue = '待审批';
  }else if(cellValue == 30){
    cellValue = '已通过';
  }else if(cellValue == 40){
    cellValue = '驳回';
  }else if(cellValue == 50){
    cellValue = '已完成';
  }
  return cellValue;
}


const assetFormatter = ()=>{
  if(searchAsset.value.status == 1){
    searchAsset.value.status = '空闲';
  }
  if(searchAsset.value.status == 2){
    searchAsset.value.status = '占用';
  }
  if(searchAsset.value.status == 3){
    searchAsset.value.status = '待修';
  }
  if(searchAsset.value.status == 4){
    searchAsset.value.status = '修理中';
  }
  if(searchAsset.value.status == 5){
    searchAsset.value.status = '报废';
  }
}

const saveDialogTitle = () =>{
  saveRepairForm.value = {};
  saveDialogVisable.value = true;
}

const checkNum = () =>{
  if(saveRepairForm.value.num > searchAsset.value.stockNum){
    ElMessage.error("维修数超出库存数!");
    saveRepairForm.value.num = "";
  }
}

const handleClose = () => {
  if(confirm('确定要关闭本弹窗?')){
    saveRepairForm.value = {};
    saveRepairFormB.value = {};
    saveDialogVisable.value = false;
    saveDialogVisableB.value = false;
  }
}

const saveRepair = () => {
  saveRepairForm.value.userId = id;
  saveRepairForm.value.parentId = 20006;
  saveRepairForm.value.assetId = searchAsset.value.id;
  saveRepairForm.value.assetBrand = searchAsset.value.brand;
  saveRepairForm.value.assetType = searchAsset.value.type;
  saveRepairForm.value.assetSpecifications = searchAsset.value.specifications;

  let saveData = qs.stringify(saveRepairForm.value);
  console.log(saveData);
  axios.post('/oa/asset/repair/save',saveData).then((response)=>{
    if(response.data.code == 20000){
      saveDialogVisable.value = false;
      saveRepairForm.value = {};
      searchAsset.value = {};
      loadApplication();
      loadAudit();
      repair();
      ElMessage.success("申请成功");
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const editRepair = (id) => {
  saveDialogVisable.value = true;
  dialogTitle.value = '编辑申请';
  applicationId = id;
  axios.get('/oa/asset/repair/show?id='+id).then((response)=>{
    if(response.data.code == 20000 && response.data.data.length != 0){
      saveRepairForm.value = response.data.data;
      searchAsset.value.brand = saveRepairForm.value.assetBrand;
      searchAsset.value.specifications = saveRepairForm.value.assetSpecifications;
      loadApplication();
      loadAudit();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const deleteRepair = (id) => {
  if(confirm('确定要删除本申请单吗?')){
    axios.post('/oa/asset/repair/delete/'+id).then((response)=>{
      if(response.data.code == 20000){
        ElMessage.success("删除成功");
        loadApplication();
        loadAudit();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

const finishRepair = (id,status) => {
  saveDialogVisableB.value = true
  applicationId = id;
  globalStatus = status;
  dialogTitle2.value = '完成维修';
  axios.get('/oa/asset/repair/show?id='+id).then((response)=>{
    if(response.data.code == 20000 && response.data.data.length != 0){
      console.log(response.data.data);
      saveRepairFormB.value = response.data.data;
      searchAssetB.value.brand = response.data.data.assetBrand;
      loadAssetB();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const auditing = (id,stauts) => {
  applicationId = id;
  saveDialogVisableB.value = true;
  if(applicationStatus.value == "10"){
    dialogTitle2.value = '待审批详情';
  }else {
    dialogTitle2.value = '驳回详情';
  }
  if(stauts == 40){
    dialogTitle2.value = '驳回详情';
    globalStatus = stauts;
  }
  axios.get('/oa/asset/repair/show?id='+id).then((response)=>{
    if(response.data.code == 20000 && response.data.data.length != 0){
      console.log(response.data.data);
      saveRepairFormB.value = response.data.data;
      searchAssetB.value.brand = response.data.data.assetBrand;
      searchAssetB.value.specifications = response.data.data.assetSpecifications;
      saveRepairFormB.value.type = response.data.data.AssetType;
      loadAssetB();
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const rejectAudit = () => {
  rejectReason.value = "";
  rejectDialogVisible.value = true;
}

const confirmReject = () => {
  saveRepairFormB.value.status = 40;
  saveRepairFormB.value.id = applicationId;
  saveRepairFormB.value.rejectReason = rejectReason.value;
  let data = qs.stringify(saveRepairFormB.value);
  console.log(data);
  axios.post('/oa/asset/repair/update',data).then((response)=>{
    if(response.data.code == 20000){
      saveDialogVisableB.value = false;
      rejectDialogVisible.value = false;
      loadAudit();
      loadApplication();
      ElMessage.success("已驳回");
      applicationId = null;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const closeReject = () => {
  rejectReason.value = "";
  rejectDialogVisible.value = false;
}

const confirmAudit = () => {
  saveRepairFormB.value.status = 30;
  saveRepairFormB.value.id = applicationId;
  let data = qs.stringify(saveRepairFormB.value);
  axios.post('/oa/asset/repair/update',data).then((response)=>{
    if(response.data.code == 20000){
      saveDialogVisableB.value = false;
      rejectDialogVisible.value = false;
      rejectReason.value = "";
      loadAudit();
      loadApplication();
      ElMessage.success("通过审核");
      applicationId = null;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const finishConfirm = () => {

  saveRepairFormB.value.status = 50;
  saveRepairFormB.value.id = applicationId;
  let data = qs.stringify(saveRepairFormB.value);
  console.log(data)
  axios.post('/oa/asset/repair/finish',data).then((response)=>{
    if(response.data.code == 20000){
      saveDialogVisableB.value = false;
      rejectDialogVisible.value = false;
      loadAudit();
      loadApplication();
      ElMessage.success("更新完成");
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

const repair = () => {
  axios.get(BASE_URL+'/oa/asset/repair/addNum').then((response)=>{
  })
}
</script>

<style scoped>

</style>